<template>
    <div class="wrapper" ref="wrapper">
        <div class="rank">
            <ul class="rank-list">
                <li class="rank-item" v-for="(item, index) of topList" :key="index">
                    <div class="rank-img">
                        <img v-lazy="item.picUrl" alt="">
                    </div>
                    <div class="rank-text">
                        <h3>{{item.topTitle}}</h3>
                        <p v-for="(item, index) of topList[index].songList" :key="index">{{item.songname}}-{{item.singername}}</p>
                    </div>
                    <i class="rank-arrow"></i>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
// 引入axios
import axios from 'axios'
// 引入better-scroll
import BScroll from 'better-scroll'
export default {
  name: 'rank',
  data () {
    return {
      topList: []
    }
  },
  methods: {
    getRankInfo () {
      // 获取ajax数据
      axios.get('/api/v8/fcg-bin/fcg_myqq_toplist.fcg')
        .then(this.getRankInfoSucc)
    },
    getRankInfoSucc (res) {
      // 返回值格式化
      res = JSON.parse(res.data.slice(18, -1))
      console.log(res.data)
      this.topList = res.data.topList
    }
  },
  mounted () {
    this.getRankInfo()
    // 初始化BScroll
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}
</script>

<style lang="less" scoped>
    @import '../../assets/less/variable.less';
    .wrapper{
        width: 100%;
        position:fixed;
        top: 84px;
        bottom: 0px;
        overflow: hidden;
        z-index: 1;
        background: #eee;
        .rank{
            width: 100%;
            padding: 10px;
            .box-sizing();
            .rank-list{
                .rank-item{
                    display: flex;
                    background: #fff;
                    position: relative;
                    margin-bottom: 10px;
                    .rank-img{
                        width: 100px;
                        height: 100px;
                        img{
                            width: 100%
                        }
                    }
                    .rank-text{
                        flex: 1;
                        padding: 0 10px;
                        min-width: 0;
                        h3{
                            font-size: 16px;
                            .ellipsis();
                            line-height: 30px;
                        }
                        p{
                            font-size: 14px;
                            .ellipsis();
                            line-height: 20px;
                        }
                    }
                    .rank-arrow{
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        margin-top: -4px;
                        width: 6px;
                        height: 6px;
                        border-right: 1px solid #b2b2b2;
                        border-bottom: 1px solid #b2b2b2;
                        transform: rotate(-45deg);
                    }
                }
            }
        }
    }
</style>
